Add a custom button to RAD

Author: Alexander Tsvirchkov
Posted: 6/5/2007 9:06:35 PM

Version: Sitecore 5.3.1 ver. 070515
Question: is it possible to add a custom button to RAD that applies a CSS class to some selected text?
Solution: please have a look at the Telerik documentation: http://www.telerik.com/help/aspnet/editor/ switch to “index” tab and find article “Adding Your Own Buttons”.
In our case you should follow these steps:
1) Create the button in Sitecore. The Editor’s buttons are placed here:
Sitecore\System\Settings\Html Editor Profiles\Rich Text Default\Toolbar X.
2) Copy an existing button and rename it to what ever you like e.g. MyCssClass. Fill the field "Click" with a string command that will be fired when the button is clicked e.g. MyCssClass.
3) We need to catch the command. You should customize the javascript file /sitecore/shell/Controls/Rich Text Editor/RichText Commands.js:

RadEditorCommandList["MyCssClass"] = function(commandName, editor, tool) {
var text = editor.GetSelectionHtml();
editor.PasteHtml("<span class=\"MyCssClass\">" + text + "</span>");
};

4) Copy image button with the name MyCssClass.gif to folder:
\sitecore\shell\RadControls\Editor\Skins\Monochrome\Buttons\
5) Restart IIS
6) Clear browser's cache
7) Check this button in RAD.

Prev Next